<template>
    <Layout>
        <!-- 页面标题和日期 -->
        <div class="bg-white border-b border-neutral-medium/30 p-4 md:p-6">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                <div>
                    <h2 class="text-[clamp(1.25rem,3vw,1.75rem)] font-bold">工作台</h2>
                    <p class="text-neutral text-sm mt-1">{{ currentDate }}</p>
                </div>

                <div class="flex items-center space-x-3 mt-4 md:mt-0">
                    <button
                        class="flex items-center space-x-2 px-4 py-2 border border-neutral-medium/30 rounded-lg text-neutral hover:bg-neutral-light transition-colors">
                        <i class="fa fa-calendar"></i>
                        <span>本月</span>
                        <i class="fa fa-angle-down ml-1"></i>
                    </button>

                    <button
                        class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors flex items-center space-x-2">
                        <i class="fa fa-plus"></i>
                        <span>新建案件</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- 快捷操作 -->
        <div class="p-4 md:p-6">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <button v-for="(action, index) in quickActions" :key="index"
                    class="bg-white rounded-xl p-4 shadow-sm flex flex-col items-center justify-center text-center card-hover"
                    @click="handleQuickAction(action)">
                    <div class="w-12 h-12 rounded-full flex items-center justify-center mb-3" :class="action.bgClass">
                        <i :class="action.iconClass"></i>
                    </div>
                    <h3 class="text-sm font-medium">{{ action.title }}</h3>
                    <p class="text-xs text-neutral mt-1">{{ action.description }}</p>
                </button>
            </div>
        </div>

        <!-- 数据概览和待办事项 -->
        <div class="flex-1 overflow-y-auto p-4 md:p-6 scrollbar-thin">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- 左侧：数据统计 -->
                <div class="lg:col-span-1 space-y-6">
                    <!-- 案件统计卡片 -->
                    <CaseStatistics />

                    <!-- 案件类型分布 -->
                    <CaseTypeDistribution />
                </div>

                <!-- 右侧：待办事项和最近活动 -->
                <div class="lg:col-span-2 space-y-6">
                    <!-- 待办事项 -->
                    <TodoList />

                    <!-- 最近活动 -->
                    <RecentActivity />
                </div>
            </div>
        </div>
    </Layout>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Layout from '@/components/layout/Layout.vue'
import CaseStatistics from '@/components/dashboard/CaseStatistics.vue'
import CaseTypeDistribution from '@/components/dashboard/CaseTypeDistribution.vue'
import TodoList from '@/components/dashboard/TodoList.vue'
import RecentActivity from '@/components/dashboard/RecentActivity.vue'

const currentDate = ref('')

// 格式化当前日期
const formatCurrentDate = () => {
    const now = new Date()
    const year = now.getFullYear()
    const month = now.toLocaleDateString('zh-CN', { month: 'long' })
    const day = now.getDate()
    const weekday = now.toLocaleDateString('zh-CN', { weekday: 'long' })
    return `${year}年${month}${day}日 ${weekday}`
}

interface QuickAction {
    title: string
    description: string
    bgClass: string
    iconClass: string
    action: string
}

const quickActions: QuickAction[] = [
    {
        title: '新建案件',
        description: '创建新的争议案件',
        bgClass: 'bg-primary/10 text-primary',
        iconClass: 'fa fa-plus text-xl',
        action: 'create-case'
    },
    {
        title: '处理案件',
        description: '处理待办案件',
        bgClass: 'bg-success/10 text-success',
        iconClass: 'fa fa-check text-xl',
        action: 'process-case'
    },
    {
        title: '生成报告',
        description: '导出处理结果',
        bgClass: 'bg-info/10 text-info',
        iconClass: 'fa fa-file-text-o text-xl',
        action: 'generate-report'
    },
    {
        title: '提醒设置',
        description: '设置通知提醒',
        bgClass: 'bg-warning/10 text-warning',
        iconClass: 'fa fa-bell-o text-xl',
        action: 'reminder-settings'
    }
]

const handleQuickAction = (action: QuickAction) => {
    alert(`执行操作: ${action.title}\n在实际应用中，这里会打开相应的操作页面`)
}

onMounted(() => {
    currentDate.value = formatCurrentDate()
})
</script>

<style scoped>
.card-hover {
    @apply hover:shadow-lg transition-all duration-300 hover:-translate-y-1;
}
</style>
